import React, { Component,useState } from 'react';
import { List, Avatar ,Table, Tag, Space,Button,Modal } from 'antd';
import { getReportList,delReport,newReport} from "../api/report_table";
import { TableOutlined } from '@ant-design/icons';
import {Link} from "react-router-dom";
import ReportInfoForm from './report_info';

export default class ManageReport extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            //visible: false,
            initValues: null,  // 初始值
            modalTitle: '',
            isModalVisible:false
        };
    }

    cancelModal = () => {
        this.setState({
            isModalVisible: false,
        });
    };
    handleOk = (reportName) => {
        let _o={name:reportName,typeid:501};
        newReport(_o).then(
            (res) => {
                console.log("get newReport response:", res.data);
                let _data=this.state.data;
                _data.push({id:res.data,
                    name:reportName,
                tableDesc:"",
                    typeid:501
                })

               // this.setState({data:_data});
                this.setState({
                    isModalVisible: false,
                    data:_data
                });
            },
            (error) => {
                console.log("get response failed!");
                alert(error)
                this.setState({
                    isModalVisible: false
                })
            }
        );
    };

    openModal = () => {
        this.setState({
            isModalVisible: true,
        });
    };


    // saveFormRef = (form) => {
    //     this.form = form;
    // };

    componentDidMount() {
        getReportList().then(
            (res) => {
                 console.log("get test response:", res.data);
                this.setState({data: res.data});
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    }

    //delete report
    deleteReport=(report_id)=>{
           delReport(report_id).then(
            (res) => {
                //console.log("get test response:", res.data);
                // 去掉一条记录
                let items=this.state.data;
                console.log("items:"+items);
                var newArr = items.filter(function (item) {
                    return !(item.id==report_id)
                })
                console.log("newArr:"+newArr);
                this.setState({data: newArr});
            },
            (error) => {
                console.log("get response failed!");
                alert('error')
            }
        );
    }
    //
    //
    //  handleCancel = () => {
    //     //setIsModalVisible(false);
    //      this.setState({
    //          isModalVisible: false
    //      });
    // };

    render() {
        return (
            <div>
            <List
                itemLayout="horizontal"
                dataSource={this.state.data}
                renderItem={item => (
                    <List.Item key={item.id} actions={[
                        // {`${match.url}/components`}
                        <Link  key={item.id+"_del"}
                            to={ '/eidtReport/' + item.id }
                          >编辑</Link>,
                        <Link  key={item.id+"_edit2"}
                               to={ '/eidtReportGrid/' + item.id }
                        >编辑2</Link>,
                        <Link  key={item.id+"_viewReport"}
                               to={ '/viewReport/' + item.id }
                        >预览</Link>,

                        <a key={item.id+"_del"} onClick={() => this.deleteReport(item.id)} >删除</a>
                    ]}>
                        <List.Item.Meta
                            avatar={<Avatar
                                style={{
                                    backgroundColor: '#87d068',
                                }}
                                icon={<TableOutlined />}
                            />}
                            title={<a href="#">{item.name}</a>}
                            description={item.tableDesc}
                        />
                    </List.Item>
                )}
            />
                <div><Button onClick={this.openModal}>增加</Button></div>

                <ReportInfoForm
                    // ref={this.saveFormRef}
                    title={this.state.modalTitle}
                    visible={this.state.isModalVisible}
                    initValues={this.state.initValues}
                     onCancel={this.cancelModal}
                     handleSave={this.handleOk}
                />
            </div>
        )
    }
}

